<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/jquery-2.1.4.js"></script>
		<script src="../js/mui.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<link href="../css/translate.css" rel="stylesheet"/>
		<script type="text/javascript" charset="UTF-8">
			var flag = false; //用于判断翻译按钮是否去除了“auto”
			mui.init({
				gestureConfig: {
					longtap: true
				}
			});
			//2次返回键退出
			mui.plusReady(function() {
				//首页返回键处理
				//处理逻辑：1.5秒内，连续两次按返回键，则退出应用；
				var first = null;
				plus.key.addEventListener('backbutton', function() {
					//首次按键，提示‘再按一次退出应用’
					if (!first) {
						first = new Date().getTime();
						mui.toast('再按一次退出应用');
						setTimeout(function() {
							first = null;
						}, 1500);
					} else {
						if (new Date().getTime() - first < 1500) {
							plus.runtime.quit();
						}
					}
				}, false);
			});
			const appid = "20160425000019587";
			const key = "axAJY7LKvmTFIX7zJulZ";
			var from = "auto"; //源语言
			var to = "en"; //翻译成xx
			var query;//要翻译的文字
			//语言列表
			const language = [{
				value: "auto",
				text: "自动检测"
			}, {
				value: "zh",
				text: "中文"
			}, {
				value: "cht",
				text: "繁体中文"
			}, {
				value: "en",
				text: "英文"
			}, {
				value: "jp",
				text: "日语"
			}, {
				value: "ru",
				text: "俄语"
			}, {
				value: "de",
				text: "德语"
			}, {
				value: "swe",
				text: "瑞典语"
			}];

			function getData() {
				//时间伪随机数
				var salt = (new Date).getTime();
				//拼接字符串
				var str1 = appid + query + salt + key;
				//计算签名sign
				var sign = MD5(str1);
				var data = {
					q: query,
					from: from,
					to: to,
					salt: salt,
					sign: sign,
					appid: appid
				};
				return data;
			}
			
			//创建翻译历史纪录
			function createHistoryList(src, dst) {
				var li = $("<li class='mui-table-view-cell mui-media'></li>").prependTo($("#historyList"));
				var a = $("<a href=\"javascript:copy('" + src + "');\");'></a>").appendTo(li);
				var div = $("<div class='mui-media-body'>" + src + "</div>").appendTo(a);
				var p = $("<p class='mui-ellipsis'>" + dst + "</p>").appendTo(div);
			}

			//初始化历史列表
			function initHistoryList() {
				$.each(localStorage, function(i, j) {
					//console.log(i + " - " + j);
					createHistoryList(i,j);
				})
			}

			function trans() {
				if ($("#query").val()) {
					query = $("#query").val();
					var data = getData();
					$.ajax({
						url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
						type: 'get',
						dataType: 'jsonp',
						data: data,
						success: function(data) {
							$("#result").val("");
							var result = data["trans_result"];
							var show = "";
							$.each(result, function(i, trans) {
								show += trans.dst + "\n";
								//加入transHistory
								createHistoryList(query,trans.dst);
								//创建 localStorage
								localStorage[query] = trans.dst;
							})
							$("#result").val(show);
						}
					});
				} else {
					mui.toast("请输入要翻译的东西...")
				}
			}
		</script>
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<h1 class="mui-title">简译</h1>
		</header>
		<div id="content" class="mui-content">
			<div class="mui-content-padded">
				<div class="input-box">
					<textarea id="query" rows="5" placeholder="请输入要翻译的内容"></textarea>
				</div>

				<div id="selectLanguage">
					<button id='transFromPicker' class="mui-btn" type='button'>自动检测(auto)</button>

					<button id='transToPicker' class="mui-btn" type='button'>英文(en)</button>
				</div>

				<div class="input-box">
					<textarea id="result" readonly="readonly" rows="5" placeholder="长按右边的按钮可以选择翻译的语言"></textarea>
				</div>
				<div>
					<p><a href="javascript:clearHistoryList();">清空</a>历史纪录</p>
					<ul id="historyList" class="mui-table-view">

					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			(function($, doc) {
				initHistoryList();
				$.init();
				$.ready(function() {
					var langPicker = new $.PopPicker();
					langPicker.setData(language);
					//from
					var FromPickerButton = doc.getElementById('transFromPicker');
					FromPickerButton.addEventListener('tap', function(event) {
						langPicker.show(function(items) {
							var txt = items[0].text + "(" + items[0].value + ")";
							FromPickerButton.innerText = txt;
							from = items[0].value;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//to
					var ToPickerButton = doc.getElementById('transToPicker');
					ToPickerButton.addEventListener('longtap', function(event) {
						//删除自动选择(auto)
						var langTo = language;
						if (!flag) {
							langTo.shift();
							flag = true;
						}
						langPicker.setData(langTo)
						langPicker.show(function(items) {
							var txt = items[0].text + "(" + items[0].value + ")";
							ToPickerButton.innerText = txt;
							to = items[0].value;
						});
					}, false);
					ToPickerButton.addEventListener('tap', function(event) {
						trans();
					});
				})
			})(mui, document);
	
			function copy(q) {
				var str = q + "  " + localStorage[q];
				copyToClip(str);
				mui.toast("已成功复制到剪切板.");
			}

			//复制到剪切板
			function copyToClip(str) {
				var Context = plus.android.importClass("android.content.Context");
				var main = plus.android.runtimeMainActivity();
				var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
				return plus.android.invoke(clip, "setText", str);
			}
			
			//清空历史纪录
			function clearHistoryList(){
				localStorage.clear();
				mui.toast("成功清除历史纪录...");
				//location.reload();
				$("#historyList").children("li").remove();
			}
		</script>
	</body>

</html>